<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 基础使用 -->
			<pj-demo title="基础使用">
				<pure-notice-bar
					:list="list"
					showIcon
				></pure-notice-bar>
				<pure-gap></pure-gap>
				<pure-notice-bar
					:list="list"
					vertical
					showIcon
				></pure-notice-bar>
			</pj-demo>

			<!-- 停顿一下 -->
			<pj-demo title="停顿一下">
				<pure-notice-bar
					:list="list"
					sticky
					showIcon
				></pure-notice-bar>
				<pure-gap></pure-gap>
				<pure-notice-bar
					:list="list"
					sticky
					vertical
					showIcon
				></pure-notice-bar>
			</pj-demo>

			<!-- 右侧按钮 -->
			<pj-demo title="右侧按钮">
				<pure-notice-bar
					:list="list"
					sticky
					showArrow
					showClose
					showIcon
					@onArrow="_handleArrowClick"
					@onClose="_handleCloseClick1"
					:show="show1"
				></pure-notice-bar>
				<pure-gap size="12px"></pure-gap>
				<pure-notice-bar
					:list="list"
					sticky
					vertical
					showArrow
					showClose
					showIcon
					@onArrow="_handleArrowClick"
					@onClose="_handleCloseClick2"
					:show="show2"
				></pure-notice-bar>
			</pj-demo>
		</view>

		<pure-gap size="12px"></pure-gap>
	</page-layout>
</template>

<script setup>
	import { ref, computed } from "vue";

	// 通知数据
	const list = ref([
		"君不见，黄河之水天上来，奔流到海不复回。",
		"君不见，高堂明镜悲白发，朝如青丝暮成雪。",
		"人生得意须尽欢，莫使金樽空对月。",
		"天生我材必有用，千金散尽还复来。",
		"烹羊宰牛且为乐，会须一饮三百杯。",
		"岑夫子，丹丘生，将进酒，杯莫停。",
		"与君歌一曲，请君为我倾耳听。",
		"钟鼓馔玉不足贵，但愿长醉不愿醒。",
		"古来圣贤皆寂寞，惟有饮者留其名。",
		"陈王昔时宴平乐，斗酒十千恣欢谑。",
		"主人何为言少钱，径须沽取对君酌。",
		"五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。"
	]);

	// 显示状态
	const show1 = ref(true);
	const show2 = ref(true);

	// 查看全部
	function _handleArrowClick() {
		uni.showToast({
			title: "查看全部",
			icon: "none"
		});
	}

	// 关闭
	function _handleCloseClick1() {
		show1.value = false;
		setTimeout(() => {
			show1.value = true;
		}, 3000);
	}

	// 关闭
	function _handleCloseClick2() {
		show2.value = false;
		setTimeout(() => {
			show2.value = true;
		}, 3000);
	}
</script>

<style lang="scss" scoped></style>
